<template>
  <div class="slider"
    @mouseenter="onMouseenter"
    @mouseleave="onMouseleave"
  >
    <swiper 
      :options="swiperOption" 
      ref="mySwiper" 
      >
      <swiper-slide class="slide-item" v-for="img in bannerImg" :key="img.id">
        <div class="img-wrapper">
          <img class="img" :src='getImgUrl(img.img)' alt="">
        </div>
      </swiper-slide>
      <!-- <swiper-slide class="slide-item">
        <div class="img-wrapper">
          <img class="img" src='@/assets/imgs/index_banner_02.png' alt="">
        </div>
      </swiper-slide>
      <swiper-slide class="slide-item">
        <div class="img-wrapper">
          <img class="img" src='@/assets/imgs/index_banner_03.png' alt="">
        </div>
      </swiper-slide>
      <swiper-slide class="slide-item">
        <div class="img-wrapper">
          <img class="img" src='@/assets/imgs/index_banner_04.png' alt="">
        </div>
      </swiper-slide> -->
    </swiper>
  </div>
</template>
<script>
export default {
    props: {
      list: {
        type: Array,
      },
      bannerImg: {
        type: Array,
        default: function() {
          return [
            {
              id: 1,
              img: 'index_banner_01'
            },
            {
              id: 2,
              img: 'index_banner_02'
            },
            {
              id: 3,
              img: 'index_banner_03'
            },
            {
              id: 4,
              img: 'index_banner_04'
            }
          ]
        }
      }
    },
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          observer:true,
          grabCursor: true,
          observeParents:true
        }
      }
    },
    methods: {
      onMouseenter() {
        this.$refs.mySwiper.swiper.autoplay.stop()
      },
       onMouseleave() {
        this.$refs.mySwiper.swiper.autoplay.start()
      },
      getImgUrl(img) {
        return require(`@/assets/imgs/${img}.png`)
      }
    }
}
</script>

<style lang="stylus" scoped>
  .slider
    .img-wrapper 
      width 940px
      height 320px
      .img 
        width 100%
</style>